<template>
  <div>
    <div class="flex-start">
      <el-date-picker size="small" v-model="searchDate" type="daterange"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"/>
      <el-button size="small" type="primary" class="m-l-10" icon="el-icon-search" :loading="loading"
                 @click="query">查询
      </el-button>
    </div>
    <el-table class="my-table m-t-20" :data="data" v-loading="loading" style="width: 100%" border height="350"
              :header-cell-style="{background:'#eee',color:'#000'}">
      <el-table-column type="index" align="center" label="序号" width="60"/>
      <el-table-column prop="updateTime" label="时间" width="160"/>
      <el-table-column label="理论余量（吨）" min-width="180">
        <template v-slot="scope">{{ scope.row.storageAfter | kg2Tons }}</template>
      </el-table-column>
      <el-table-column label="变化量（吨）" min-width="150">
        <template v-slot="scope">{{ scope.row.changeCapacity | kg2Tons }}</template>
      </el-table-column>
      <el-table-column prop="changeDesc" label="变化原因" min-width="200"/>
    </el-table>
    <app-pagination ref="paginationRef" :total="total" class="m-t-20" @change="query"/>
    <div class="dividing-line m-t-20 m-b-20"></div>
    <div class="flex-center">
      <div></div>
      <el-button size="small" class="m-t-20" @click="back">关闭</el-button>
      <div></div>
    </div>
  </div>
</template>

<script>
import AppPagination from "@/components/business/app-pagination";
import {getRecords, getTotal, isListEmpty, isNull} from "@/util/common-util";
import {getPage} from "@/api/business/filling-storage-car-history";

export default {
  name: "margin-changed-history-list-content",
  components: {AppPagination},
  props: ['detail'],
  data() {
    return {
      data: [],
      loading: false,
      total: 0,
      searchDate: [],
      search: {
        startTime: '',
        endTime: '',
        carId: ''
      }
    }
  },
  mounted() {
    this.query()
  },
  methods: {
    back() {
      this.$emit('back')
    },
    query(_page) {
      if (isNull(_page)) {
        _page = this.$refs.paginationRef.getPage()
      }
      this.loading = true
      if (isListEmpty(this.searchDate)) {
        this.search.startTime = ''
        this.search.endTime = ''
      } else {
        this.search.startTime = this.searchDate[0]
        this.search.endTime = this.searchDate[1]
      }
      this.search.carId = this.detail.id
      getPage(_page, this.search).then(res => {
        this.data = getRecords(res)
        this.total = getTotal(res)
        this.loading = false
      }).then(() => {
        this.loading = false
      })
    },
  }
}
</script>


<style lang="scss" scoped>
.my-table {
  ::v-deep .el-button--small {
    padding: 0 5px !important;
    font-size: 14px !important;
  }

  ::v-deep td {
    padding: 8px 0 !important;
  }
}
</style>

